<toaster-container></toaster-container>
<div class="row mb-2">
    <a href="javascript:;" class="text-link" [routerLink]="['../../']">
        <i class="ti-arrow-left"></i> Back to Ip Login
    </a>
</div>
<h3 class="mb-4">{{accountName}}</h3>
<form *ngIf="ipList" #f="ngForm" (ngSubmit)="f.form.valid && save()" novalidate>
    <div *ngFor="let interval of ipList.ipDatas;let index = index" class="card card-body row mb-2" style="flex-direction: row">
        <span class="col-md-2 text-right">From Ip</span>
        <div class="col-md-3">
            <input class="form-input" name="from_{{index}}" [(ngModel)]="interval.ipFrom" [pattern]="pattern" #from="ngModel" required >                
            <div *ngIf="from.errors?.required" class="errorMessage">Initial IP required</div>
            <div *ngIf="from.errors?.pattern" class="errorMessage">Invalid IP</div>
        </div>
        <span class="col-md-1 text-right">To Ip</span>
        <div class="col-md-3">
            <input class="form-input" name="to_{{index}}" [(ngModel)]="interval.ipTo" [pattern]="pattern" #to="ngModel">        
            <div *ngIf="to.errors?.pattern" class="errorMessage">Invalid IP</div>
        </div>
        <div class="offset-md-1 col-md-2">
            <button class="btn btn-transparent" (click)="remove(interval)">Remove</button>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-md-6">
            <button class="btn btn-primary-dark" (click)="add()">Add</button>
        </div>
        <div class="col-md-6" style="text-align: right">
            <button type="submit" class="btn btn-transparent">Save</button>
            <button class="btn btn-transparent ml-1" (click)="cancel($event)">Cancel</button>
        </div>
    </div>
</form>
